<!--
 * @Author: Cenven
 * @Date: 2021-06-26 09:56:20
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-06-26 15:25:05
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
    <div class='hot_course'>
        <div class="hot_head_box">
            <span class="head_left">热门课程</span>
            <span class="head_right">查看更多<Icon type="ios-arrow-forward" size='14'/></span>
        </div>
        <div class="hot_course_list">
            <div class="hot_course_item" v-for="(item,index) in hot_course" :key="item.id" @click="toPath(item.id)">
                <div class="course_cover">
                    <img :src="item.iconPath" alt="">
                </div>
                <p class="course_name">{{item.courseName}}</p>
                <div class="course_bottom">
                    <div class="course_bottom_left">
                        <span style="color: #a3a9b2;">{{ item.majorName }}&emsp;|&emsp;</span><span style="color: #757980;">{{ item.acName }}</span>
                    </div>
                    <div class="course_bottom_right">
                        <img :src="item.avatar" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { getCourse } from "~/api/course";
  export default {
      name:"hot_course",
     components: {},
     data() {
        return {
            hot_course:[],
        };
     },
     computed: {},
     watch: {},
     methods: {
        ...mapMutations(["SET_IS_LOADING"]),
        toPath(id) {
            this.$router.push({
                path: "/coursedetail",
                query: {
                id
                }
            });
        },
        async getRecCourse() {
            this.SET_IS_LOADING(true);
            let params = {
                offset: 0,
                limit: 4,
                sort: "sortIndex desc",
                isRec: 1
            };
            let result = await getCourse(params);
            if (result && result.data && result.data.code == 200) {
                this.SET_IS_LOADING(false);
                this.hot_course = result.data.data.rows;
            } else {
                this.SET_IS_LOADING(false);
                this.$Message.error(
                this.$t("locale.pc.mytest.testTrain.t25") + result &&
                    result.data &&
                    result.data.msg
                );
            }
        }
     },
     created() {
         this.getRecCourse();
     },
     mounted() {
         
     },
  }
</script>

<style lang='scss' scoped>
.hot_course{
    width: 306px;
    background-color: #ffffff;
    .hot_head_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 20px;
        .head_left{
            font-size: 16px;
            font-weight: bold;
            color: var(--theme-color);
        }
        .head_right{
            font-size: 12px;
            font-weight: bold;
            color: #aaadb3;
            cursor: pointer;
            &:hover{
                color: var(--theme-color);
            }
        }
    }
    .hot_course_list{
        min-height: 1100px;
        .hot_course_item{
            width: 306px;
	        height: 274px;
            border-top: 1px solid #edf2fa;
            padding: 20px 28px 10px;
            box-sizing: border-box;
            cursor: pointer;
            .course_cover{
                width: 250px;
                height: 166.66px;
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .course_name{
                margin-top: 6px;
                font-size: 14px;
                font-weight: bold;
                line-height: 18px;
                height: 36px;
                color: #494a4d;
                display: -webkit-box;
                -webkit-line-clamp:2;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
            }
            .course_bottom{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .course_bottom_left{
                    font-size: 12px;
                }
                .course_bottom_right{
                    width: 32px;
	                height: 32px;
                    img{
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
}
</style>